<%--
  Created by IntelliJ IDEA.
  User: hp
  Date: 2021/3/25
  Time: 11:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script src="/comms/reset.css"></script>
<style>
    textarea {
        width: 750px;
        height: 804px;
    }
    #update-paragraph .manage {
        margin: 20px 159px 20px 159px;
    }

    #update-paragraph .manage .chapter-list {
        width: 320px;
        height: 386px;
        position: fixed;
    }

    #update-paragraph .manage .wide {
        width: 894px;
        height: 1163px;
        margin-left: 327px;
        position: relative;
    }
</style>
<body>

<div id="update-paragraph">
    <div class="manage">
        <div class="chapter-list">
            <table class="chapters">
                <thead>
                <tr>
                    <th>章节目录</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="chapter in chapters">
                    <td>{{chapter.cname}}</td>
                    <td>
                        <button @click="_deleteChapter(chapter.chapterid,chapter.nid)">删除</button>
                        <button @click="_showUpdateChapter(chapter.chapterid,chapter.cname)">修改</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="wide">
            <div class="add-chapter-form">
                <div class="add-cname">

                    <p>
                        第<input type="number" v-model="addChapter.chapterNum" width="30px">章
                        <label for="add-name">章节名:</label>
                        <input type="text" id="add-name" v-model="addChapter.name">
                    </p>
                </div>
                <div class="add-content">
                    <label for="add-content"></label>
                    <textarea placeholder="请输入章节内容50000字以内" name="add-content" id="add-content"
                              v-model="addChapter.content"></textarea>
                </div>
                <button @click="_addChapter">上传章节</button>
            </div>
            <div class="update-chapter-form" v-show="showUpdateChapter">
                <p>第<input type="text" pattern=[0-9]* v-model="updateChapter.chapterNum">章</p>
                <label for="update-name">章节名:</label>
                <input type="text" id="update-name" v-model="updateChapter.name">
                <label for="update-content">内容:</label>
                <input type="text" id="update-content" v-model="updateChapter.content">
                <button @click="_updateChapter">修改章节</button>
            </div>
        </div>
    </div>
</div>
<script src="/comms/jquery.js"></script>
<script src="/comms/vue.js"></script>
<script>
    function request(url, method, fn, data) {
        $.ajax({
            url: url,
            data: data,
            method: method,
            dataType: "json",
            success: fn,
        })
    }
</script>
<script>
    let v = new Vue({
        el: "#update-paragraph",
        data: {
            chapters: [],
            showUpdateChapter: false,
            addChapter: {
                chapterNum: "",
                name: "",
                nid: "",
                content: ""
            },
            updateChapter: {
                chapterID: "",
                chapterNum: "",
                name: "",
                content: ""
            }
        },
        created: function () {
            this.initParagraph(${sessionScope.nid})
        },
        methods: {
            initParagraph: function (nid) {
                let this_ = this;
                this.addChapter.nid = nid;
                request("/chapter/selectChapters?nid=" + nid, "GET", function (data) {
                    if (data.flag) {
                        this_.chapters = data.data;
                    } else {
                        console.log(data.message);
                    }
                })
            },
            _addChapter: function () {
                let chapter = this.addChapter;
                let this_ = this;
                request("/chapter/addChapter", "POST", function (data) {
                    if (data.flag) {
                        this_.initParagraph(this.addChapter.nid);
                    } else {
                        alert(data.message);
                    }
                }, chapter)
            },
            _deleteChapter: function (chapterID, nid) {
                let this_ = this;
                request("/chapter/deleteChapterById?chapterID=" + chapterID, "GET", function (data) {
                    if (data.flag) {
                        this_.initParagraph(nid);
                    } else {
                        alert(data.message);
                    }
                })
            },
            _showUpdateChapter: function (chapterID, cname) {
                this.updateChapter.chapterID = chapterID;
                this.updateChapter.chapterNum = cname.split(" ")[0].replace("第", "").replace("章", "");
                this.updateChapter.name = cname.split(" ")[1];
                this.showUpdateChapter = !this.showUpdateChapter;
            },
            _updateChapter: function () {
                let chapter = this.updateChapter;
                let this_ = this;
                request("/chapter/updateChapter", "POST", function (data) {
                    if (data.flag) {
                        this.showUpdateChapter = false;
                        this_.initParagraph(this.addChapter.nid);
                    } else {
                        alert(data.message);
                    }
                }, chapter)
            }
        }
    })
</script>
</body>
</html>
